<template>
  <div>
    <question-card
      v-for="item in questionList"
      :key="item.id"
      :questionTitle="item.questionTitle"
      :questionAnswer="item.questionAnswer"
      :questionType="item.questionType"
      :createdAt="item.createdAt"
      :id="item.id"
      :lookNum="item.lookNum"
      :preView="item.questionPreView"
      @goDetail="goQuestionDetail(item.id)"
    ></question-card>
    <div style="margin-top: 20px; padding-bottom: 20px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="curentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import QuestionCard from '@/components/QuestionCard.vue'
import { getAllCollectQuestion } from '@/api/api'
export default {
  components: {
    QuestionCard
  },
  data() {
    return {
      questionList: [],
      curentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  created() {
    this.getMyCollectionQuestions()
  },
  methods: {
    getMyCollectionQuestions() {
      const data = {
        curentPage: this.curentPage,
        pageSize: this.pageSize,
        userId: this.$store.getters.getUserInfo.id
      }
      getAllCollectQuestion(data).then((res) => {
        console.log(res)
        const data = res.data.data
        this.total = data.count
        this.questionList = data.questionIdArr
      })
    },
    goQuestionDetail(id) {
      this.$router.push({
        path: `/questionsDetail/${id}`
      })
    },
    // 选择每页展示几条
    handleSizeChange(val) {
      this.pageSize = val
      this.getMyCollectionQuestions()
      console.log(`每页 ${val} 条`)
    },
    // 选择去几页
    handleCurrentChange(val) {
      this.curentPage = val
      this.getMyCollectionQuestions()
      console.log(`当前页: ${val}`)
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-input .el-input__inner {
  padding: 10px 15px;
  height: 10px;
  letter-spacing: 1px;
  border: 1px solid #dcdfe6;
}
::v-deep .el-input .el-input__inner::-webkit-input-placeholder {
  color: #999;
  font-size: 13px;
}
</style>